<template>
  <div class="userContainer">
    <div class="user-header" style="padding:25px 20px;background: #b75d12;color: #ffffff;">
      <div class="center" style="display: flex;align-items: center;justify-content: space-between;">
        <div class="left" style="display: flex;align-items: center;">
          <img :src="'http://youker.net:8080/img/avatar.901489fb.png'" alt=""
            style="width: 60px; height: 60px;border-radius: 50%;" />
          <div class="username" style="text-align: left;margin-left: 20px;font-size: 22px;">KyrieC</div>
        </div>
        <div class="right">
          <van-icon name="arrow" size="24" />
        </div>
      </div>
    </div>
    <div class="user-content">
      <van-grid :column-num="3" square :icon-size="30">
        <van-grid-item v-for="(item,index) in userGridList" :key="index" :icon="item.icon" :text="item.text" />
      </van-grid>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return({
      userGridList:[
        {icon:'records-o',text:'我的订单'},
        {icon:'bill-o',text:'优惠券'},
        {icon:'gift-o',text:'礼品卡'},
        {icon:'star-o',text:'我的收藏'},
        {icon:'calendar-o',text:'我的足迹'},
        {icon:'vip-card-o',text:'会员福利'},
        {icon:'location-o',text:'地址管理'},
        {icon:'completed-o',text:'账号安全'},
        {icon:'service-o',text:'联系客服'},
        {icon:'smile-comment-o',text:'帮助中心'},
        {icon:'chat-o',text:'意见反馈'},
      ]
    })
  }
}
</script>

<style></style>